<html>
<head>
<style>
    .drag {
        -webkit-app-region: drag;
    }

    .nodrag {
        -webkit-app-region: no-drag;
    }

    .transform {
        transform: scale(0.5, 0.5);
    }

    #draggable {
        position: absolute;
        top: 10px;
        left: 20px;
        width: 100px;
        height: 60px;
        background-color: green;
    }

    #nondraggable {
        left: 0px;
        top: 0px;
        width: 60px;
        height: 20px;
        background-color: blue;
    }
</style>
</head>

<script src="../../resources/js-test.js"></script>
<script>
description("This tests that transformed annotated regions have the correct bounds.");
function getBoundsFromClientRectList(rects) {
    if (rects && rects.length == 1)
        return rects[0].left + "," + rects[0].top + "+" + rects[0].width + "x" + rects[0].height;
    return '';
}

function draggableRegions() {
    return getBoundsFromClientRectList(internals.draggableRegions(document));
}

function nonDraggableRegions() {
    return getBoundsFromClientRectList(internals.nonDraggableRegions(document));
}

function startTest() {
    shouldBe("draggableRegions()", "''");
    shouldBe("nonDraggableRegions()", "''");

    draggable.classList.add("drag");
    shouldBe("draggableRegions()", "'20,10+100x60'");
    shouldBe("nonDraggableRegions()", "''");

    draggable.classList.add('transform');
    shouldBe("draggableRegions()", "'45,25+50x30'");
    shouldBe("nonDraggableRegions()", "''");

    nondraggable.classList.add('nodrag');
    shouldBe("draggableRegions()", "'45,25+50x30'");
    shouldBe("nonDraggableRegions()", "'45,25+30x10'");

    draggable.classList.remove('transform');
    shouldBe("draggableRegions()", "'20,10+100x60'");
    shouldBe("nonDraggableRegions()", "'20,10+60x20'");

    finishJSTest();
}

window.jsTestIsAsync = true;
window.onload = startTest;
</script>

<body>
<div id="draggable">
    <div id="nondraggable"></div>
</div>
<p id="description"></p>
<div id="console"></div>
</body>
</html>
